<!--
  @author:  long
  @date:    2023/3/7
  @file:    客户联系人
  @require:
-->
<template>
  <div>
    <div class="flex items-center justify-between">
      <TitleName title="订单记录" icon="i-carbon-bookmark-filled"></TitleName>
      <div>
        <el-button type="primary" icon="Plus" @click="addOrder" v-if="btnShow"
          >添加</el-button
        >
        <el-button type="primary" icon="UploadFilled" plain>导出</el-button>
      </div>
    </div>
    <el-table
      class="mt-2"
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="number" label="订单编号" width="200">
        <template #default="scope">
          <el-link
            type="primary"
            :underline="false"
            @click="
              goTo('/sales/indent/salesOrderDetails', {
                salesOrderId: scope.row.id
              })
            "
            >{{ scope.row.number }}</el-link
          >
        </template></el-table-column
      >
      <el-table-column prop="title" label="订单标题" width="230">
      </el-table-column>
      <el-table-column label="业务板块">
        <template #default="scope">
          <dict-tag :options="sys_oper_type" :value="scope.row.businessType" />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="订单总金额" width="130">
        <template #default="scope">
          <span v-if="scope.row.price">¥{{ scope.row.price }}</span
          ><span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column prop="approvalStatus" label="审批状态" width="130">
        <template #default="scope">
          {{ scope.row.approvalStatus }}
        </template>
      </el-table-column>

      <el-table-column prop="repaymentPrice" label="已回款金额" width="130">
        <template #default="scope">
          <span v-if="scope.row.repaymentPrice"
            >¥{{ scope.row.repaymentPrice }}</span
          ><span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="invoicePrice" label="已开票金额" width="130">
        <template #default="scope">
          <span v-if="scope.row.invoicePrice"
            >¥{{ scope.row.invoicePrice }}</span
          ><span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTimes"
        label="创建时间"
        width="150"
      ></el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="DetailsOrderList">
import { getCurrentInstance } from 'vue'
import { delContact } from '@/api/customerManage/contactList'
import { getOrderList } from '@/api/salesManage/contractManage'

const router = useRouter()
const route = useRoute()

const { proxy } = getCurrentInstance()
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  tableData: [],
  total: 0,
  btnShow: true,
  selectionData: []
})
const { queryParams, tableData, total, selectionData, btnShow } = toRefs(data)
const { sys_oper_type } = proxy.useDict('sys_oper_type')
const props = defineProps({
  tableParam: {
    type: Object,
    default: () => {
      return {
        id: '',
        name: '',
        type: '',
        btnShow: true,
        queryParams: {}
      }
    }
  }
})

function goTo(url, data) {
  router.push({ path: url, query: data })
}

/**
 * 添加订单
 */
function addOrder() {
  let obj = {
    customerId: props.tableParam.id,
    customerName: props.tableParam.name,
    customerType: props.tableParam.type
  }
  router.push({
    path: '/sales/indent/salesOrderForm',
    query: { salesOrderData: JSON.stringify(obj) }
  })
}

/**
 * 获取列表数据
 */
function getList() {
  btnShow.value =
    props.tableParam.btnShow == undefined ? true : props.tableParam.btnShow
  if (route.name == 'ProjectDetails') {
    queryParams.value.projectId = props.tableParam.id
  } else if (props.tableParam.id) {
    queryParams.value.customerId = props.tableParam.id
  } else if (
    props.tableParam.queryParams &&
    JSON.stringify(props.tableParam.queryParams) != '{}'
  ) {
    queryParams.value = props.tableParam.queryParams
  } else {
    return
  }

  getOrderList(queryParams.value).then(res => {
    tableData.value = res.rows
    total.value = res.total
  })
}

getList()
</script>

<style scoped lang="scss"></style>
